<template>
<div style="">
  <div class="top">
    <div>
      <div style="text-align: right;padding: 5px 0;">
<!--        <Dropdown>-->
<!--          <a href="javascript:void(0)">-->
<!--            {{languageValue}}-->
<!--            <Icon type="ios-arrow-down"></Icon>-->
<!--          </a>-->
<!--          &lt;!&ndash;        <template #list>&ndash;&gt;-->
<!--          &lt;!&ndash;          <DropdownMenu>&ndash;&gt;-->
<!--          &lt;!&ndash;            <DropdownItem>驴打滚</DropdownItem>&ndash;&gt;-->
<!--          &lt;!&ndash;            <DropdownItem>炸酱面</DropdownItem>&ndash;&gt;-->
<!--          &lt;!&ndash;          </DropdownMenu>&ndash;&gt;-->
<!--          &lt;!&ndash;        </template>&ndash;&gt;-->
<!--        </Dropdown>-->

      </div>
    </div>
    <div style="padding-top: 45px;">
      <Col span="8" class="text-center">
        <h3 class="h3">FBMKLCI</h3>
        <p class="t-p1">1468.37</p>
        <p class="t-p2">+10%</p>
      </Col>
      <Col span="8" class="text-center">
        <h3 class="h3">FBMKLCI</h3>
        <p class="t-p1">1468.37</p>
        <p class="t-p2">+10%</p>
      </Col>
      <Col span="8" class="text-center">
        <h3 class="h3">FBMKLCI</h3>
        <p class="t-p1">1468.37</p>
        <p class="t-p2">+10%</p>
      </Col>
    </div>

  </div>
  <div class="mt15" style="height: 50px;">
    <Col span="6">
      <img src="../../assets/images/chongzhi.png" class="img" alt="" @click="toPage('mobileRecharge')">
      <p>充值</p>
    </Col>
    <Col span="6">
      <img src="../../assets/images/newbuy.png" class="img" alt="" @click="toPage('mobileWithdraw')">
      <p>提现</p>
    </Col>
    <Col span="6">
      <img src="../../assets/images/wallet.png" class="img" alt="" @click="toPage('mobileWallet')">
      <p>钱包</p>
    </Col>
    <Col span="6">
      <img src="../../assets/images/tx.png" class="img" alt="" >
      <p>客服</p>
    </Col>
  </div>
  <div class="mt15">
    <Table highlight-row id="MK" :columns="columns" :data="dataIndex" class="leftTable"></Table>
  </div>
  <div style="width: 100%;height: 50px;">&nbsp;</div>
  <div class="tarbar flex">
      <Col span="8" class="text-center active">
        <Icon type="ios-home" size="16" />
        <p class="caidan">首页</p>
      </Col>
      <Col span="8" class="text-center" @click.native="toPage('mobileMine2')">
        <Icon type="ios-bookmarks" />
        <p class="caidan">市场</p>
      </Col>
<!--      <Col span="6" class="text-center" @click="toPage('mobileTrade')">-->
<!--        <Icon type="ios-aperture" />-->
<!--        <p class="caidan">交易</p>-->
<!--      </Col>-->
      <Col span="8" class="text-center" @click.native="toPage('mobileMine')">
        <Icon type="ios-contact" />
        <p class="caidan">我的</p>
      </Col>
  </div>
</div>
</template>

<script>
export default {
  name: "Exchange",
  data(){
    return {
      dataIndex: [],
      columns: [
        {
          title: 'Name/Code',
          key: "coin",
          sortable: false,
          width: 120,
          className: "coin-menu-symbol",
          render: (h, params) => {
            return h("div", {style: { padding: '5px 0'}}, [

              // h("Icon", {
              //   props: {
              //     // color:"red",
              //     type: params.row.isFavor
              //       ? "ios-star"
              //       : "ios-star-outline"
              //   },
              //   nativeOn: {
              //     click: () => {
              //       event.stopPropagation(); //阻止事件冒泡
              //       if (this.isLogin) {
              //         if (
              //           event.currentTarget.className ==
              //           "ivu-icon ivu-icon-ios-star"
              //         ) {
              //           this.cancelCollect(params.index, params.row);
              //           event.currentTarget.className ==
              //             "ivu-icon ivu-icon-ios-star-outline";
              //         } else {
              //           this.collect(params.index, params.row);
              //           event.currentTarget.className =
              //             "ivu-icon ivu-icon-ios-star";
              //         }
              //       } else {
              //         this.$Message.warning("请先登录");
              //       }
              //     }
              //   }
              // }),
              h("span",{
                style: {width: "120px",whiteSpace:'nowrap',textOverflow:''}
              }, params.row.Name),
              h("p",{
                style: {width: "120px",whiteSpace:'nowrap',textOverflow:'', color: '#666666'}
              }, params.row.Symbol)
            ]);
          }
        },
        {
          title: 'Current',
          key: "current",
          align: "center",
          render: (h, params) => {
            return  h("div",{
              style: {width: "120px",whiteSpace:'nowrap',textOverflow:'', textAlign: 'center'}
            }, parseFloat(params.row.Last).toFixed(2))
          }
        },
        {
          title: 'Change',
          key: "change",
          align: "right",
          render: (h, params) => {
            const row = params.row;
            // #26A59A
            const className = row.ChgPct < 0 ? "green_" : row.ChgPct == 0 ? "gray" : "red__";
            return h(
                "div",
                {
                  style: { textAlign: 'center'},
                  attrs: {
                    class: className
                  }
                },
                row.ChgPct + '%'
            );
          }
        }
      ]
    }
  },
  computed: {
    activeNav: function() {
      return this.$store.state.activeNav;
    },
    isLogin: function() {
      return this.$store.getters.isLogin;
    },
    member: function() {
      return this.$store.getters.member;
    },
    languageValue: function() {
      var curlang = this.$store.getters.lang;
      if (curlang == "English") this.$i18n.locale = "en";
      return curlang;
    },
    lang() {
      return this.$store.state.lang;
    },
    exchangeSkin() {
      return this.$store.state.exchangeSkin;
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let resp2
      let coins = []
      this.$http
          .get(this.host + 'api/getIns')
          .then(response => {
            resp2 = response.body.data;
            for (var i = 0; i < resp2.length; i++) {
              var coin = resp2[i];
              coin.isFavor = false;
              //this.coins.MK = coin;
              coins.push(coin);
            }
            this.dataIndex = coins
            console.log(this.dataIndex)
            //this.getKline()
          });
    },
    toPage(url) {
      console.log(url)
      this.$router.push(`/${url}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  width: 34px;
  height: 34px;
}
.tarbar {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0;
  background-color: #000000;
  z-index: 999;
}
.text-center {
  text-align: center;
}
.caidan {
  font-size: 12px;
}
.active {
  color: #00aeef;
}
.top {
  width: 100%;
  height: 205px;
  background: url("http://img.navikex.com/uploaded_images/home-top-bg.15337cd9.png") no-repeat top;
  background-size: 100%;
}
.top {
}
.h3 {
  color: #e7ddd1;
}
.t-p1, .t-p2{
  color: #259b86;
}
.t-p1 {
  font-weight: bold;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.pl10 {
  padding-left: 10px;
}
.pr10 {
  padding-right: 10px;
}
.th {
  color: #94897b;
}
.mt15 {
  margin-top: 15px;
}
.leftTable >>> .red__ {
  background-color: #EA5C53;

}
.leftTable >>> .green_ {
  background-color: #26A59A;
}
.leftTable >>> .gray {
  background-color: #757575;
}
</style>